<template>
  <div class="dashboard-container">
    <!-- 顶部打卡区域 -->
    <div class="clock-in-section">
      <el-card class="clock-card">
        <div class="clock-buttons">
          <el-button 
            type="primary" 
            size="large" 
            :disabled="hasClockedIn" 
            @click="handleClockIn"
            :loading="clockInLoading"
          >
            <i class="el-icon-success"></i> 上班打卡
          </el-button>
          <div class="time-display">
            <div class="current-time">{{ currentTime }}</div>
            <div class="current-date">{{ currentDate }}</div>
          </div>
          <el-button 
            type="success" 
            size="large" 
            :disabled="hasClockedOut" 
            @click="handleClockOut"
            :loading="clockOutLoading"
          >
            <i class="el-icon-success"></i> 下班打卡
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 左侧区域 -->
      <el-col :span="16">
        <!-- 公告通知 -->
        <el-card class="notice-board">
          <div slot="header" class="card-header">
            <span><i class="el-icon-bell"></i> 公告通知</span>
            <!-- 可能不需要 -->
            <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="handleViewMore()">查看更多</el-button> -->
          </div>
          <el-table :data="noticesList" style="width: 100%" :show-header="false">
            <el-table-column prop="noticeTitle" label="标题">
              <template slot-scope="scope">
                <el-tag size="small" :type="scope.row.type">{{ scope.row.noticeType }}</el-tag>
                <span class="notice-title" @click="showNoticeDialog(scope.row)">{{ scope.row.title }}</span>
                <span class="notice-date">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <!-- 流程进度 -->
        <el-card class="process-board">
          <div slot="header" class="card-header">
            <span><i class="el-icon-s-operation"></i> 流程进度</span>
          </div>
          <div v-if="latestTrip">
            <el-steps :active="activeStep" align-center finish-status="success">
              <el-step
                v-for="(step, index) in currentProcess"
                :key="index"
                :title="step.title"
                :description="step.date"
              >
                <template slot="description">
          <span :class="{'process-date': true, 'process-active': index < activeStep}">
            {{ step.date }}
          </span>
                </template>
              </el-step>
            </el-steps>
          </div>
          <el-empty v-else description="暂无申请记录"></el-empty>
        </el-card>
      </el-col>

      <!-- 右侧区域 -->
      <el-col :span="8">
         <el-card class="attendance-rule">
    <div slot="header" class="card-header">
      <span><i class="el-icon-time"></i> 我的考勤规则</span>
    </div>
    <div v-if="attendanceRule" class="rule-content">
      <div class="rule-item">
        <label>规则名称：</label>
        <span>{{ attendanceRule.ruleName }}</span>
      </div>
      <div class="rule-item">
        <label>上班打卡：</label>
        <span>{{ formatTime(attendanceRule.checkInStart) }} - {{ formatTime(attendanceRule.checkInEnd) }}</span>
      </div>
      <div class="rule-item">
        <label>下班打卡：</label>
        <span>{{ formatTime(attendanceRule.checkOutStart) }} - {{ formatTime(attendanceRule.checkOutEnd) }}</span>
      </div>
      <div class="rule-item">
        <label>迟到阈值：</label>
        <el-tag type="warning">{{ formatTime(attendanceRule.lateThreshold) }}</el-tag>
      </div>
      <div class="rule-item">
        <label>早退阈值：</label>
        <el-tag type="danger">{{ formatTime(attendanceRule.earlyLeaveThreshold) }}</el-tag>
      </div>
      <div class="rule-status">
        状态：<el-tag :type="attendanceRule.status === 1 ? 'success' : 'info'">
          {{ attendanceRule.status === 1 ? '已启用' : '已禁用' }}
        </el-tag>
      </div>
    </div>
    <el-empty v-else description="未配置考勤规则"></el-empty>
  </el-card>
        <!-- 工作计划 -->
        <el-card class="work-plan">
          <div slot="header" class="card-header">
            <span><i class="el-icon-date"></i> 工作计划</span>
            <el-button 
              style="float: right; padding: 3px 0" 
              type="text"
              @click="showPlanDialog"
            >
              添加
            </el-button>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(plan, index) in sortedWorkPlans"
              :key="index"
              :type="plan.type"
              :timestamp="plan.time"
            >
              {{ plan.content }}
              <el-button 
                type="danger" 
                size="mini" 
                style="margin-left: 10px"
                @click="deletePlan(plan.id)"
              >
                删除
              </el-button>
            </el-timeline-item>
          </el-timeline>
        </el-card>

        <!-- 我的便签 -->
        <el-card class="note-board">
          <div slot="header" class="card-header">
            <span><i class="el-icon-edit"></i> 我的便签</span>
            <el-button 
              style="float: right; padding: 3px 0" 
              type="text"
              @click="showAddNoteDialog"
            >
              新建
            </el-button>
          </div>
          <div class="notes-list">
            <div v-for="(note, index) in notes" :key="index" class="note-item">
              <div class="note-content">{{ note.content }}</div>
              <div class="note-time">{{ note.time }}</div>
              <el-button type="text" @click="deleteNote(note.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 考勤异常对话框 -->
    <el-dialog
      title="考勤异常说明"
      :visible.sync="absentDialogVisible"
      width="40%"
      @closed="handleRemarkClose"
    >
      <el-form>
        <el-form-item label="异常类型">
          <el-tag type="danger">缺勤</el-tag>
        </el-form-item>
        <el-form-item label="情况说明" prop="notes">
          <el-input
            v-model="form.notes"
            type="textarea"
            :rows="4"
            placeholder="请填写缺勤原因说明（至少10字）"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="absentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRemark">提交说明</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="考勤异常说明"
      :visible.sync="earlyDialogVisible"
      width="40%"
      @closed="handleRemarkClose"
    >
      <el-form>
        <el-form-item label="异常类型">
          <el-tag type="danger">早退</el-tag>
        </el-form-item>
        <el-form-item label="情况说明" prop="notes">
          <el-input
            v-model="form.notes"
            type="textarea"
            :rows="4"
            placeholder="请填写早退原因说明（至少10字）"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="earlyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRemark">提交说明</el-button>
      </span>
    </el-dialog>

    <!-- 新建便签对话框 -->
    <el-dialog
      title="新建便签"
      :visible.sync="addNoteDialogVisible"
      width="40%"
    >
      <el-form>
        <el-form-item label="便签内容">
          <el-input
            v-model="newNoteContent"
            type="textarea"
            :rows="4"
            placeholder="请输入便签内容"
            maxlength="255"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addNoteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNote">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 工作计划添加对话框 -->
    <el-dialog
      title="添加工作计划"
      :visible.sync="addPlanDialogVisible"
      width="500px"
    >
      <el-form 
        :model="formPlan" 
        :rules="planRules" 
        ref="planForm"
        label-width="80px"
      >
        <el-form-item label="计划内容" prop="content">
          <el-input 
            v-model="formPlan.content" 
            type="textarea"
            :rows="3"
            placeholder="请输入工作计划内容（至少5个字符）"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="时间" prop="time">
          <el-time-select
            v-model="formPlan.time"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '20:00',
              format: 'HH:mm'
            }"
            placeholder="选择时间点"
          ></el-time-select>
        </el-form-item>

        <el-form-item label="状态" prop="type">
          <el-select
            v-model="formPlan.type"
            placeholder="请选择事件状态"
            style="width: 100%"
          >
            <el-option
              v-for="option in planStatusOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="addPlanDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePlanSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 公告详情弹框 -->
    <el-dialog
      title="详情"
      :visible.sync="viewNoticeDialogVisible"
      width="600px"
    >
      <!-- 新增：标题展示区域 -->
      <div class="dialog-header">
        <h3 style="font-size: 1.25em; font-weight: 600; color: #303133; margin: 0 0 15px;">
          {{ currentNotice.title }} <!-- 显示公告标题 -->
        </h3>
        <div style="height: 1px; background: #f0f2f5; margin-bottom: 20px;"></div> <!-- 分隔线 -->
      </div>
      <div class="dialog-title">
        <h3 style="margin: 0; font-size: 1.2em; font-weight: 600; color: #303133;">
          {{ currentNotice.noticeTitle }}
        </h3>
        <div class="title-divider" style="height: 1px; background: #f0f2f5; margin: 10px 0;"></div>
      </div>

      <!-- 核心修改：过滤<p>标签后渲染 -->
      <div class="dialog-content" v-html="filterParagraphTags(currentNotice.noticeContent)"></div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewNoticeDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkIn, checkOut, getTodayStatus, updateAttendanceRemark, getIpLocation } from "@/api/system/record";
import { listNotices } from "@/api/system/notices";
import { selectCurrentUserBusinessTripsById } from '@/api/system/trips';
import { addNote, deleteNote, getNotesByUserId } from "@/api/system/note";
import { addWorkPlan, deleteWorkPlan, getWorkPlansByUserId } from "@/api/system/workPlan"; // 引入工作计划相关 API
// 在EmployeeDashboard组件的<script>顶部添加引入
import { getUserRuleByUserId } from '@/api/system/userRule';
export default {
  name: 'EmployeeDashboard',
  data() {
    return {
          attendanceRule: null,
      // 工作计划相关数据
      planStatusOptions: [
        { label: '重要', value: 'primary', color: '#409EFF' },
        { label: '普通', value: 'success', color: '#67C23A' },
        { label: '紧急', value: 'warning', color: '#E6A23C' }
      ],
      addPlanDialogVisible: false,
      formPlan: {
        content: '',
        time: '',
        type: 'primary' // 默认状态
      },
      planRules: {
        content: [
          { required: true, message: '请输入计划内容', trigger: 'blur' },
          { min: 5, message: '内容至少5个字符', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择时间点', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择事件状态', trigger: 'change' }
        ]
      },
      // 新增弹框相关变量
      viewNoticeDialogVisible: false,
      currentNotice: {},
      // 原有功能数据
      currentTime: '',
      currentDate: '',
      hasClockedIn: false,
      hasClockedOut: false,
      clockInLoading: false,
      clockOutLoading: false,
      absentDialogVisible: false,
      earlyDialogVisible: false,
      locationInfo: null,
      currentLocation: null,
      form: { notes: '', recordId: null },
      queryParams: {
        noticeTitle: undefined,
        createBy: undefined,
        status: undefined
      },
      noticesList: [],
      currentProcess: [
        { title: '提交申请', date: '' },
        { title: '审核中', date: '' },
        { title: '审批结果', date: '' }
      ],
      workPlans: [], // 初始化工作计划列表
      notes: [],
      addNoteDialogVisible: false,
      newNoteContent: '',
      tripsList: [],
      activeStep: 1,
      latestTrip: null
    };
  },
  created() {
    this.fetchAttendanceRule();
    this.userId = this.$store.state.user.id;
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
    this.fetchTodayStatus();
    this.fetchLocation();
    this.getNotice();
    this.getOneBusinessTripsApply();
    this.fetchNotes();
    this.fetchWorkPlans(); // 新增：获取工作计划
    console.log("当前登录的用户id为：" + this.userId);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
methods: {
  // 时间格式化（直接处理字符串，避免时区问题）
formatTime(timeStr) {
  if (!timeStr) return '00:00';
  const timePart = timeStr.split(' ')[1] || timeStr;
  const [hours, minutes] = timePart.split(':');
  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
},

  // 获取考勤规则（确保数据正确）
  async fetchAttendanceRule() {
    try {
      const userId = this.$store.state.user.id;
      const response = await getUserRuleByUserId(userId);
      console.log('考勤规则数据:', response.rows); // 打印原始数据检查时间字段
      if (response.code === 200 && response.rows.length > 0) {
        this.attendanceRule = response.rows[0];
      }
    } catch (error) {
      console.error('获取考勤规则失败:', error);
    }
  },
    // 新增：过滤<p>标签并处理内容
      filterParagraphTags(content) {
  if (!content) return '';
  
  // 1. 保留原有的<br>标签（如果有的话）
  // 2. 将<p>标签替换为换行符
  const cleanedContent = content
    .replace(/<p[^>]*>/g, '\n\n') // 将<p>替换为两个换行符
    .replace('</p>', '');       // 移除</p>
  
  // 3. 处理连续换行符（可选）
  return cleanedContent.replace(/\n{3,}/g, '\n\n'); // 合并多个换行符为两个
},
    // 新增：打开公告详情弹框
    showNoticeDialog(notice) {
      this.currentNotice = { ...notice }; // 复制当前公告数据
      this.viewNoticeDialogVisible = true; // 显示弹框
    },
    // 工作计划相关方法
    showPlanDialog() {
      this.addPlanDialogVisible = true;
      // 重置表单
      this.formPlan = { content: '', time: '', type: 'primary' };
      this.$nextTick(() => this.$refs.planForm?.clearValidate());
    },

    handlePlanSubmit() {
      this.$refs.planForm.validate(valid => {
        if (!valid) return;

        // 检查时间是否重复
        if (this.workPlans.some(plan => plan.time === this.formPlan.time)) {
          this.$message.warning('该时间点已有计划');
          return;
        }

        const newPlan = {
          content: this.formPlan.content,
          time: this.formPlan.time,
          type: this.formPlan.type,
          userId: this.userId // 添加用户 ID
        };

        addWorkPlan(newPlan).then(response => {
          if (response.code === 200) {
            this.$message.success('计划添加成功');
            newPlan.id = response.data; // 获取新计划的 ID
            this.workPlans.push(newPlan);
            this.addPlanDialogVisible = false;
          } else {
            this.$message.error('计划添加失败: ' + response.msg);
          }
        }).catch(error => {
          this.$message.error('计划添加失败: ' + (error.response?.data?.msg || '未知错误'));
        });
      });
    },

    deletePlan(id) {
      this.$confirm('确定要删除这条计划吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWorkPlan(id).then(response => {
          if (response.code === 200) {
            this.$message.success('计划删除成功');
            this.workPlans = this.workPlans.filter(plan => plan.id !== id);
          } else {
            this.$message.error('计划删除失败: ' + response.msg);
          }
        }).catch(error => {
          this.$message.error('计划删除失败: ' + (error.response?.data?.msg || '未知错误'));
        });
      }).catch(() => this.$message.info('已取消删除'));
    },

    // 新增：获取工作计划
    fetchWorkPlans() {
      const userId = this.$store.state.user.id;
      getWorkPlansByUserId(userId).then(response => {
        this.workPlans = response.rows || [];
      }).catch(error => this.$message.error('获取工作计划失败'));
    },

    // 便签相关方法
    fetchNotes() {
      const userId = this.$store.state.user.id;
      getNotesByUserId(userId).then(response => {
        this.notes = response.rows || [];
      }).catch(error => this.$message.error('获取便签失败'));
    },

    showAddNoteDialog() {
      this.addNoteDialogVisible = true;
    },

    addNote() {
      if (this.newNoteContent.trim() === '') {
        this.$message.warning('便签内容不能为空');
        return;
      }
      const userId = this.$store.state.user.id;
      addNote({
        content: this.newNoteContent,
        create_time: new Date().toISOString().slice(0, 19).replace('T', ' '),
        user_id: userId
      }).then(response => {
        this.$message.success('便签添加成功');
        const newNoteId = response.data;
        if (newNoteId) {
          this.notes.push({
            id: newNoteId,
            content: this.newNoteContent,
            time: new Date().toLocaleString()
          });
        }
        this.addNoteDialogVisible = false;
        this.newNoteContent = '';
      }).catch(error => {
        this.$message.error('便签添加失败: ' + (error.response?.data?.msg || '未知错误'));
      });
    },

    deleteNote(id) {
      if (!id) {
        this.$message.error('未获取到要删除的便签 id');
        return;
      }
      const ids = [id];
      deleteNote(ids).then(() => {
        this.notes = this.notes.filter(note => note.id !== id);
        this.$message.success('便签删除成功');
      }).catch(error => {
        this.$message.error('便签删除失败: ' + (error.response?.data?.msg || '未知错误'));
      });
    },

    // 百度地图定位功能
    async fetchLocation() {
      this.loading = true;
      try {
        const response = await getIpLocation();
        if (response.code === 200) {
          this.locationInfo = response.data;
          this.currentLocation = this.locationInfo.address;
          this.showCurrentLocation();
        } else {
          this.$modal.msgError(response.msg);
        }
      } catch (error) {
        this.$modal.msgError('获取位置失败');
      } finally {
        this.loading = false;
      }
    },
    showCurrentLocation() {
      if (this.currentLocation) {
        this.$message.success("当前位置为：" + this.currentLocation);
      } else {
        this.$message.error("当前位置为null！");
      }
    },
    // 查询公告
    getNotice() {
      this.loading = true;
      listNotices(this.queryParams).then(response => {
        this.noticesList = response.rows.map(item => ({
          noticeType: item.noticeType === '1' ? '通知' : '公告',
          type: item.noticeType === '1' ? 'warning' : 'success',
          title: item.noticeTitle,
          date: this.parseTime(item.createTime),
          noticeContent: item.noticeContent // 补充公告内容
        }));
        console.log('noticesList:', this.noticesList); // 添加日志检查数据
        this.loading = false;
      });
    },
    // 公告栏跳转功能
    handleViewMore() {
      // 跳转到通知公告完整列表页面
      this.$router.push('/system/notice');
    },

    // 查询最新的一条出差申请记录
    getOneBusinessTripsApply() {
      const currentUserId = this.userId;
      selectCurrentUserBusinessTripsById(currentUserId).then(response => {
        if (response.rows && response.rows.length > 0) {
          // 获取最新的一条记录
          this.latestTrip = response.rows[0];
          console.log("最新的出差记录：", this.latestTrip);
          this.updateProcessStatus(this.latestTrip);
        } else {
          // 没有记录时重置状态
          this.activeStep = 1;
          this.currentProcess = [
            { title: '提交申请', date: '' },
            { title: '审核中', date: '' },
            { title: '审批结果', date: '' }
          ];
        }
        this.loading = false;
      }).catch(error => {
        console.error("获取出差记录失败：", error);
        this.loading = false;
      });
    },
    // 更新流程进度状态
    updateProcessStatus(tripData) {
      if (!tripData) return;
      console.log("当前用户最新申请记录的status为：" + tripData.status);

      // 更新时间
      this.currentProcess[0].date = this.parseTime(tripData.createdTime); // 申请时间
      this.currentProcess[1].date = '审核中';

      // 根据状态更新进度
      switch (tripData.status) {
        case 'PENDING':
          this.activeStep = 2;
          this.currentProcess[1].date = '处理中';
          this.currentProcess[2].date = '待处理';
          break;
        case 'APPROVED':
          this.activeStep = 3;
          this.currentProcess[1].date = this.parseTime(tripData.approvalTime);
          this.currentProcess[2].date = '已通过';
          break;
        case 'REJECTED':
          this.activeStep = 3;
          this.currentProcess[1].date = this.parseTime(tripData.approvalTime);
          this.currentProcess[2].date = '已驳回';
          break;
        default:
          this.activeStep = 1;
          break;
      }
    },

    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString();
      this.currentDate = now.toLocaleDateString();
    },

    fetchTodayStatus() {
      getTodayStatus().then(response => {
        const status = response.status;
        const notes = response.notes;
        if (response.data && response.data.id) {
          this.form.recordId = response.data.id;
        }
        if (status === 'ABSENT' && notes == null) {
          this.absentDialogVisible = true;
        }
        if (status === 'EARLY_LEAVE' && notes == null) {
          this.earlyDialogVisible = true;
        }
        // if (status === 'NORMAL' && notes == null) {
        //   this.$message.success('经验+3');
        // }
      }).catch(() => {
        this.$message.error('获取考勤状态失败');
      });
    },

    handleClockIn() {
      this.clockInLoading = true;
      checkIn().then(async response => {
        console.log('打卡'+response)
        this.$message.success('上班打卡成功！');
      // 打卡成功后，获取最新状态并判断
      const statusResponse = await getTodayStatus(); // 新增：获取最新状态
      const status = statusResponse.status;
      if (status === 'NORMAL') { // 仅状态正常时显示经验
        this.$message.success('经验+3');
      }
        this.hasClockedIn = true;
        this.fetchTodayStatus();
      }).catch(error => {
        this.$message.error(error.message || '打卡失败');
      }).finally(() => {
        this.clockInLoading = false;
      });
    },

    handleClockOut() {
      this.clockOutLoading = true;
      checkOut().then(async response => {
        this.$message.success('下班打卡成功！');
              // 打卡成功后，获取最新状态并判断
      const statusResponse = await getTodayStatus(); // 新增：获取最新状态
      const status = statusResponse.status;
      if (status === 'NORMAL') { // 仅状态正常时显示经验
        this.$message.success('经验+3');
      }
        this.hasClockedOut = true;
        this.fetchTodayStatus();
      }).catch(error => {
        this.$message.error(error.message || '打卡失败');
      }).finally(() => {
        this.clockOutLoading = false;
      });
    },

    submitRemark() {
      if (this.form.notes.length < 10) {
        this.$message.warning('说明内容至少需要10字');
        return;
      }
      updateAttendanceRemark({
        id: this.form.recordId,
        notes: this.form.notes,
        userId: this.$store.state.user.id
      }).then(() => {
        this.$message.success('说明提交成功');
        this.absentDialogVisible = false;
        this.earlyDialogVisible = false;
      }).catch(error => {
        this.$message.error('提交失败: ' + (error.response?.data?.msg || '未知错误'));
      });
    },

    handleRemarkClose() {
      this.form.notes = '';
      this.form.recordId = null;
    },

    parseTime(time) {
      // 简单示例，实际可根据后端返回格式调整
      return new Date(time).toLocaleString();
    }
  },
  computed: {
    // 按时间排序工作计划
    sortedWorkPlans() {
      return this.workPlans.slice().sort((a, b) => {
        const [h1, m1] = a.time.split(':').map(Number);
        const [h2, m2] = b.time.split(':').map(Number);
        return (h1 * 60 + m1) - (h2 * 60 + m2);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.attendance-rule {
  margin-bottom: 20px;
}

.rule-content {
  padding: 10px;
}

.rule-item {
  margin: 12px 0;
  display: flex;
  align-items: center;
}

.rule-item label {
  width: 80px;
  color: #606266;
  font-weight: 500;
}

.rule-status {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  text-align: center;
}
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;

  .clock-in-section {
    margin-bottom: 20px;

    .clock-card {
      .clock-buttons {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;

        .time-display {
          text-align: center;

          .current-time {
            font-size: 32px;
            font-weight: bold;
            color: #303133;
          }

          .current-date {
            font-size: 14px;
            color: #909399;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .main-content {
    .notice-board, .process-board, .work-plan, .note-board {
      margin-bottom: 20px;

      // 工作计划时间线节点颜色
      .el-timeline-item {
        &[vnode="primary"] .el-timeline-item__node {
          background-color: #409EFF;
        }
        &[vnode="success"] .el-timeline-item__node {
          background-color: #67C23A;
        }
        &[vnode="warning"] .el-timeline-item__node {
          background-color: #E6A23C;
        }

        .el-button {
          margin-left: 10px;
          font-size: 0.9em;
          padding: 3px 8px;
        }
      }
      
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: bold;
        i {
          margin-right: 5px;
        }
      }
    }

    .notice-title {
      margin-left: 10px;
      color: #303133;
    }

    .notice-date {
      float: right;
      color: #909399;
      font-size: 13px;
    }

    .notes-list {
      .note-item {
        padding: 10px;
        border-bottom: 1px solid #EBEEF5;

        &:last-child {
          border-bottom: none;
        }

        .note-content {
          color: #303133;
          margin-bottom: 5px;
        }

        .note-time {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
  
}
::v-deep .dialog-content {
  img {
    max-width: 100% !important; /* 强制图片宽度不超过父容器 */
    height: auto !important; /* 保持宽高比 */
    display: block; /* 图片独占一行 */
    margin: 15px 0; /* 上下间距 */
    border-radius: 8px; /* 可选圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选阴影 */
  }
  white-space: pre-wrap; /* 保留空白符并允许换行 */
  word-wrap: break-word;  /* 允许长单词换行 */
  line-height: 1.6;       /* 增加行高提升可读性 */
}

</style>   